<template>
  <div>
    <el-form @submit.native.prevent>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item>
            <div style="display:flex">
              <el-input v-model="inputText" prefix-icon="el-icon-search" placeholder="请输入"
                        @keyup.enter.native="getList">
              </el-input>
              <el-button type="primary" @click="getList">查询
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!--表格内容-->
    <el-table :data="tableData" class="tableData" border highlight-current-row style="width: 100%; margin-bottom: 5px;"
              :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <el-table-column type="index" label="序号" fixed></el-table-column>
      <el-table-column label="基础信息">
        <el-table-column prop="name" label="档案名称" width="100px"></el-table-column>
        <el-table-column prop="fileNumber" label="档案编号" width="120px"></el-table-column>
        <el-table-column prop="vin" label="VIN" width="160px"></el-table-column>
        <el-table-column prop="ywlx" label="业务类型" width="120px"></el-table-column>
        <el-table-column prop="contractNumber" label="合同编号" width="120px"></el-table-column>
      </el-table-column>
      <el-table-column label="项目存档管理">
        <el-table-column prop="location" label="归档位置" width="120px"></el-table-column>
        <el-table-column prop="archiveDate" label="入档日期" width="110px"></el-table-column>
        <el-table-column prop="pgs" label="存档人" width="100px"></el-table-column>
        <el-table-column prop="change" label="有无变更"></el-table-column>
        <el-table-column prop="years" label="保存期限"></el-table-column>
      </el-table-column>
      <el-table-column label="项目提取管理">
        <el-table-column prop="extractionDate" label="提取日期" width="110px"></el-table-column>
        <el-table-column prop="seal" label="公司与评估印章" width="120px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.seal" active-color="#13ce66" inactive-color="#ff4949"
                       @change="selectStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="报告提取方式" width="180px" v-loading="loading">
          <div slot-scope="scope" v-if="scope.row.download">
            <!-- 二维码 -->
            <el-popover v-if="!loading" placement="left" trigger="hover" @show="getQrCode(scope.row.ywid)">
              <el-image style="width: 150px; height: 150px" :src="qrCodeUrl" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <svg slot="reference" class="icon" aria-hidden="true">
                <use xlink:href="#icon-erweima"></use>
              </svg>
            </el-popover>
            <!-- word -->
            <el-tooltip v-if="!loading" content="Word" placement="top">
              <svg class="icon" aria-hidden="true" @click="bgtqfs(scope.row.ywid, 'word', scope.row.ywbh,'docx')"
                   style="cursor: pointer">
                <use xlink:href="#icon-WORD"></use>
              </svg>
            </el-tooltip>
            <!-- pdf -->
            <el-tooltip v-if="!loading" content="PDF" placement="top">
              <svg class="icon" aria-hidden="true" @click="bgtqfs(scope.row.ywid, 'pdf', scope.row.ywbh,'pdf')"
                   style="cursor: pointer">
                <use xlink:href="#icon-pdf"></use>
              </svg>
            </el-tooltip>

            <!-- loading图标 -->
            <i v-if="loading" class="el-icon-loading" style="font-size: 30px"></i>
          </div>
          <div v-else style="color: #E6A23C">业务未审核</div>
        </el-table-column>

        <!--        <el-table-column prop="remark" label="备注" width="180px"></el-table-column>-->
      </el-table-column>
      <el-table-column v-if="role == '评估师'" label="操作" fixed="right" width="100px">
        <template slot-scope="scope">
          <el-button type="text" @click="gd(scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <DocumentEdit ref="editRef" v-if="editShow" :editShow="editShow" :record="formFile" @dialogClose="dialogClose"
                  @getList="getList">
    </DocumentEdit>
    <!--分页-->
    <el-pagination :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </div>
</template>

<script>
import {getFile, getFiles, getDocument} from '@/api/evaluation/document';
import DocumentEdit from './documentEdit.vue';
import {VXETable} from 'vxe-table'
import {createBg2} from "@/api/evaluation/verify";
import QRCode from 'qrcodejs2'

export default {
  name: "document",
  components: {
    DocumentEdit
  },
  data() {
    return {
      role: localStorage.getItem('role'),
      formFile: {
        ywbh: "",
        qyid: null,
        location: "",
        remark: "",
        seal: null,
      },
      inputText: "",
      editShow: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [10],
      // 二维码图片地址
      qrCodeUrl: '',

      loading: false,
      word_loading: true,
      pdf_loading: true
    };
  },
  methods: {

    selectStatus(row) {
      let obj = {
        qyid: row.qyid,
        location: row.location,
        ywbh: row.ywbh,
        remark: row.remark,
        seal: row.seal,
      }
      getDocument(obj).then((res) => {
      })
    },
    httqfs(id, str) {
      window.location.href = '/api/wtht/createWtht?wthtid=' + id + '&type=' + str + '&download=true'
    },
    bgtqfs(id, str, fileName, type) {
      //window.location.href = '/api/jdcpg/yw/cspgBg?ywid=' + id + '&type=' + str + '&officialseal=false'
      //window.open('/api/jdcpg/yw/cspgBg?ywid=' + id + '&type=' + str + '&officialseal=false')
      // this.loading = true
      // fetch('/api/jdcpg/yw/cspgBg?ywid=' + id + '&type=' + str + '&officialseal=false')
      //   .then(res => res.blob())
      //   .then(blob => {
      //     this.loading = false
      //     VXETable.saveFile({filename: fileName, type: type, content: blob})
      //   })

      createBg2('ywid=' + id + '&type=' + str + "&recreate=false").then(
        (res) => {
          if (res.data == null) {
            this.$message({
              message: '报告正在生成',
              type: 'warning'
            })
          } else {
            window.open(res.data)
          }
        })
    },
    dialogClose() {
      this.editShow = false
    },
    gd(row) {
      console.log('row', row)
      this.formFile.qyid = row.qyid
      this.formFile.location = row.location
      this.formFile.ywbh = row.ywbh
      this.formFile.remark = row.remark
      this.formFile.seal = row.seal
      this.editShow = true
    },
    handleSizeChange(e) {
      this.pageSize = e
      if (this.input) {
        this.search()
      } else {
        this.getList()
      }

    },
    handleCurrentChange(e) {
      this.pageNum = e
      if (this.input) {
        this.search()
      } else {
        this.getList()
      }
    },
    getList() {
      {
        if (localStorage.getItem('role') === '评估师') {
          let obj = {
            input: this.inputText,
            qyid: Number(localStorage.getItem('companyId')),
            userId: Number(localStorage.getItem('userId')),
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
          getFile(obj).then((res) => {
            this.tableData = res.data.list
            this.total = res.data.total
            this.tablePage()
          })

        } else if (localStorage.getItem('role') != '评估师' && localStorage.getItem('role') != '财务') {
          let obj = {
            input: this.inputText,
            qyid: Number(localStorage.getItem('companyId')),
            // qyid: 1,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
          getFiles(obj).then((res) => {
            this.tableData = res.data.list
            this.total = res.data.total
            this.tablePage()
          })
        }
      }
    },
    tablePage() {
      this.pageSizes = []
      let all = Math.ceil(this.total / 10)
      for (let i = 0; i < all; i++) {
        this.pageSizes.push(10 * (i + 1))
      }
    },
    // 获取二维码
    getQrCode(ywid) {
      let url = 'http://118.195.141.52/api/download/QRCode-jdbg/ajbgcx.html?ywid=' + ywid
      this.qrCodeUrl = "/api/jdcpg/yw/getQRCodeImg?text=" + url
    }
  },
  mounted() {
    this.getList()
  },
};
</script>

<style scoped lang="less">
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin: 0 10px;
}
</style>
